<template>
  <div class="role-list">
    <page-header
      v-bind="roleHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="roleContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #permissions>
        <div class="permissions">
          <permission-tree
            ref="perTreeRef"
            :menu-list="menuList"
            :check-list="checkList"
          />
        </div>
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import roleHeaderConfig from '@/views/main/system/role/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import roleContentConfig from '@/views/main/system/role/config/content-config'
import PermissionTree from '@/components/permissions-tree/permission-tree.vue'
import usePageHeader from '@/hooks/use-page-header'
import modalEditAndAddConfig from '@/views/main/system/role/config/modal-edit-and-add'
import modalPermissionsConfig from '@/views/main/system/role/config/modal-permissions'
import { SingleBtns, USER_INFO } from '@/global/constant'
import { localCache } from '@/utils/cache'
import { useRoleStore } from '@/store'
import { storeToRefs } from 'pinia'
import type { SingleBtnType } from '@/global/types'

const roleStore = useRoleStore()
const { menuList, checkList } = storeToRefs(roleStore)

const perTreeRef = ref<InstanceType<typeof PermissionTree>>()
const roleId = ref(0)

// ============================= page-header ===============================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ============================= page-content ================================
const singleBtnConfig = ref()
// 子传父
// 0.点击表单框的确定按钮
const handleConfirmClick = (type: SingleBtnType) => {
  singleBtnConfig.value = null
  // 下面的操作只是在权限分配中用到
  if (type !== SingleBtns.Permissions) return
  checkList.value = []
  const allKeys = perTreeRef.value?.getAllKeys()
  // 根据allKeys发送请求分配权限
  roleStore.updateRolePermissionsAction({
    roleId: roleId.value,
    selectMenuList: allKeys
  })
}

const handleCancelClick = () => {
  singleBtnConfig.value = null
  checkList.value = []
}

// 1.点击单操作按钮
const singleBtnClick = async (type: SingleBtnType, row?: any) => {
  if (SingleBtns.Add === type || SingleBtns.Edit === type) {
    // 1.1新增和编辑用同一套配置
    singleBtnConfig.value = modalEditAndAddConfig
  } else if (SingleBtns.Permissions === type) {
    // 1.2. 权限分配
    singleBtnConfig.value = modalPermissionsConfig
    pageContentRef.value?.setModalStatus(true)
    const userId = localCache.getCache(USER_INFO).loginId
    roleId.value = row.roleId
    await roleStore.getAssignTreeAction(userId, row.roleId)
    return
  }
  // 这里可能完善起来要根据按钮是否能打开对话框，这里写死了
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped>
.role-list {
}

.permissions {
  display: flex;
  justify-content: center;
  margin-right: 30px;
}
</style>
